<template>
    <div id="centreRight1">
        <div class="bg-color-black">
            <!--      左部分-->
            <div class="centerLeft">
                <div class="left-df">
                  <img :src="wen" class="ims">
                </div>
            </div>
            <!--      右部分-->
            <div class="centerRight">
                <div class="left-zi">姓名:{{name}}</div>
                <div class="left-zi">卡号:{{cardno}}</div>
                <div class="left-zi">位置:{{weizhi}}</div>
                <div class="left-zi">部门名称:{{compamydept}}</div>
                <div class="left-zi">事件进门:{{identify}}</div>
                <div class="left-zi">时间:{{crtime}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
              name:'',
              cardno:'',
              compamydept:'',
              identify:"",
              crtime:"",
              weizhi:"",
              wen:""
            };
        },
        components: {},
        created() {
          this.initWebSocket()
        },
      methods: {
        //websocket 长链接   用于生成收款码 实时判断等
        //初始化weosocket
        initWebSocket() {
          if (typeof WebSocket === 'undefined') {  //判断浏览器是否支持
            alert('您的浏览器不支持WebSocket')
            return false
          }
          var userName = this.list    //获取当前登录用户信息
          // const wsuri = 'ws://cloud.lgdz-aiti.cn/prod-api/websocket/' + userName  //线上
          const wsuri = 'ws://192.168.10.175:8088/ws/asset/' + 1  //线下

          this.websock = new WebSocket(wsuri)               //初始化socket方法
          this.websock.onopen = this.websocketonopen     //连接成功的处理
          this.websock.onmessage = this.websocketonmessage //接收数据之后的处理
          this.websock.onerror = this.websocketonerror     //报错的处理
          this.websock.onclose = this.websocketclose       //关闭连接的处理
        },
        //连接成功
        websocketonopen() {
          // console.log('WebSocket本机连接成功')
          // 添加心跳检测，每300秒发一次数据，防止连接断开（这跟服务器的设置有关，如果服务器没有设置每隔多长时间不发消息断开，可以不进行心跳设置）
          let self = this
          this.timer = setInterval(() => {
            try {
              const jsonHeart = {
                'Status': 'heart',            //向服务端标明 本机心跳
                'user': this.list                    //同时携带登录用户信息
              }
              self.websock.send(JSON.stringify(jsonHeart))  //发送消息
            } catch (err) {
              console.log('断开了：' + err)
              self.connection()
            }
          }, 300000)  // 定时发送
        },
        //接收后端返回的数据，可以根据需要进行处理 实时监控数量
        websocketonmessage(e) {
          console.log(e)
          const userName = this.list     //获取当前登录用户信息
          var res = JSON.parse(e.data) //将JSON字符串转换成一个对象
          // var res = e.data//将JSON字符串转换成一个对象
          // console.log("---------------------时间")
          // console.log(res)
            this.name=res.jobName
          this.cardno=res.cardNo
          this.compamydept=res.compamyDept
          this.identify=res.identifyRecordType
          this.crtime=res.crtime
          this.wen=res.workerZhaopian
          this.weizhi=res.Device_Location
        },
        //连接建立失败重连
        websocketonerror(e) {
          console.log(`连接失败的信息：`, e)
          this.initWebSocket() // 连接失败后尝试重新连接
        },
        //关闭连接
        websocketclose(e) {
          console.log('断开连接', e)
        },
        }
    };
</script>

<style lang="scss" scoped>
    #centreRight1 {
        padding: 20PX;

        .text {
            color: #c3cbde;
        }

        .body-box {
            border-radius: 0.125rem;
            overflow: hidden;
        }

        .centerLeft {
            /*background-color: #4b67af;*/
            width: 220px;
            float: left;
           /*background-color: #4AB7BD;*/
            height: 360px;
        }
        .left-df{
            width: 220px;
            height: 220px;
            margin-top: 80px;
            border: 5px solid #2dd5fc;
            background-size: cover;
            background-position: center center;
            border-radius:50%;
        }
     /*.ims{*/
     /*  border: 5px solid #2dd5fc;*/
     /*}*/
      img[src=""],
      img:not([src]) {
        opacity:0;
      }
      .ims{
        width: 210px;
        height: 210px;
        border-radius:50%;
       border: none;
      }
        .centerRight {
            width: 400px;
            float: right;
          margin-top: 30px;
          /*background-color: #1c84c6;*/
        }
        .left-zi{
            font-size:30px;
            margin-top:20px;
          font-weight: 600;
            color: #2dd5fc;
        }
    }
</style>
